import * as THREE from 'three';
import { gsap } from 'gsap';
export class Dot {
 public dot: THREE.Mesh
 private ripple: THREE.Mesh
 constructor(size: number = 1, color: string = 'white') {
  this.dot = new THREE.Mesh(new THREE.CircleGeometry(size), new THREE.MeshBasicMaterial({ color: color, side: THREE.DoubleSide }))
  this.ripple = new THREE.Mesh(new THREE.CircleGeometry(size), new THREE.MeshBasicMaterial({ color: color, transparent: true, side: THREE.DoubleSide }))
  this.dot.add(this.ripple)
 }
 flicker = (time: number = 1, scale: number = 1.5) => {
  gsap.to(this.ripple.scale, { x: scale, y: scale }).duration(time).repeat(Infinity);
  gsap.to(this.ripple.material as THREE.MeshBasicMaterial, { opacity: 0 }).repeat(Infinity).duration(time).delay(time / 10);
 }
}
export class Line {
 public line: THREE.Points
 public curve: THREE.CubicBezierCurve3
 constructor(startPoint: THREE.Vector3, endPoint: THREE.Vector3, color: number = 0xffffff) {
  const controlPoint1 = new THREE.Vector3(startPoint.x, startPoint.y, startPoint.distanceTo(endPoint) / 2)
  const controlPoint2 = new THREE.Vector3(endPoint.x, endPoint.y, startPoint.distanceTo(endPoint) / 2)
  this.curve = new THREE.CubicBezierCurve3(startPoint, controlPoint1, controlPoint2, endPoint)
  const points = this.curve.getPoints(80)
  this.line = new THREE.Points(new THREE.BufferGeometry().setFromPoints(points), new THREE.PointsMaterial({ color }))
  const lookPoints = points.slice(1, 80)
  const initPoints = points.slice(0, 79)
  let i = 0
  setInterval(() => {
   if (i >= 3) {
    i = 0
   }
   const arr = lookPoints.map((value, index) => {
    const x = initPoints[index].x + (value.x - initPoints[index].x) / 3 * i
    const y = initPoints[index].y + (value.y - initPoints[index].y) / 3 * i
    const z = initPoints[index].z + (value.z - initPoints[index].z) / 3 * i
    const newPoint = new THREE.Vector3(x, y, z)
    return newPoint
   })
   this.line.geometry = new THREE.BufferGeometry().setFromPoints(arr)
   i += 1
  }, 100)
 }
}